<template>
	<view class="my-box" :class="show?'show':''">

    <view class="bg-gradual-pink head-box">
      <!--用户信息-->
      <view class="user-info-box">
        <!--未登陆-->
        <view class="login-user-view" v-if="login">
          <view class="login-user-avatar-view">
            <view class="cu-avatar round lg" :style="'background-image:url('+imgUrl+'/static/stat/images/avatar/2.jpg'+')'"/>
          </view>
          <button class="cu-btn sm radius" open-type="getAuthorize" @getAuthorize="loginUrlTap" scope='userInfo'>立即登录</button>
        </view>

        <!--已登陆-->
        <view class="cu-list menu-avatar" v-else>
          <view class="cu-item">
            <view class="cu-avatar round lg" :style="'background-image:url('+userInfo.avatarUrl+')'"/>
            <view class="content text-xl">
              <view class="text-white">
                <text class="margin-right">{{userInfo.nickname}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="view-content">
      <!--用户数据-->
      <view class="padding-xs bg-white user-info-order-box">
        <view class="text-black text-lg text-bold padding-sm">我的订单</view>
        <view class="cu-list grid col-4 no-border">
          <view class="cu-item" @click="orderAllHandle(1)">
            <view class="text-xxl " >
              <text class="cuIcon-pay"></text>
            </view>
            <text class="text-sm">待付款</text>
          </view>
          <view class="cu-item" @click="orderAllHandle(2)">
            <view class="text-xxl " >
              <text class="cuIcon-exit"></text>
            </view>
            <text class="text-sm">待发货</text>
          </view>
          <view class="cu-item" @click="orderAllHandle(5)">
            <view class="text-xxl " >
              <text class="cuIcon-deliver"></text>
            </view>
            <text class="text-sm">待买断</text>
          </view>
          <view class="cu-item" @click="orderAllHandle(0)">
            <view class="text-xxl " >
              <text class="cuIcon-copy"></text>
            </view>
            <text class="text-sm">全部订单</text>
          </view>
        </view>
      </view>
      <!--推荐工具-->
      <view class="padding-xs bg-white margin-top user-info-tools-box">
        <view class="padding-sm tools-view">
          <view class="text-black text-bold text-lg tools-title">我的服务</view>
        </view>

        <view class="tools-list-box">
          <view class="cu-list grid col-4 no-border">
            <block v-for="(item,index) in toolsList" :key="index">
              <view class="cu-item" v-if="index < 12" @tap="gridTap(item)">
                <view class="text-black" :class="['cuIcon-' + item.icon]"/>
                <text>{{item.name}}</text>
              </view>
            </block>
          </view>
        </view>

      </view>
      <!-- 瀑布流 -->
      <view class="recommended">
        <text class="yi"></text> <text style="margin: 0 5px;">热门推荐</text> <text class="yi"></text>
      </view>
      <view class="category-goods">
        <goods-list :list_data="activity_goods" @listTap="goodsListTap" />
      </view>
    </view>
      <!--租赁订单-->
<!--    <view class="view-content">-->
<!--      <circle-tabs v-model='tabIndex' :tabList="list" mode='skew'></circle-tabs>-->
<!--    </view>-->
	</view>
</template>

<script>

  import circleTabs from "./circle-tabs";
  import GoodsList from "./goods-list";
  import {mapState} from 'vuex'
  import {getCodeId, getGoods, getId, getPhone, getUser, login} from "../../common/http";

  export default {
		name: 'my',
    components: {
      circleTabs,
      GoodsList,
    },
    computed: {
      ...mapState(['imgUrl']),
    },
		data() {
			return {
				toolsList: [{
          id: 1,
          icon: 'service',
          name: '客服中心'
        },{
          id: 2,
          icon: 'edit',
          name: '投诉&建议'
        },{
          id: 3,
          icon: 'question',
          name: '使用帮助'
        },{
          id: 4,
          icon: 'info',
          name: '关于我们'
        },{
          id: 5,
          icon: 'settings',
          name: '设置'
        }],
        login: true,
        tabIndex:0,
        list:[
          {
            id:0,
            title:'租赁订单',
            icon:""
          },
          {
            id:1,
            title:'',
            icon:""
          }
        ],
        activity_goods: [],
        page: 1,
        pageSize: 10,
        nomore: true,
        userInfo: uni.getStorageSync('userInfo'),
        userId: uni.getStorageSync('userId'),
        Modal: false,
			}
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			scrollY: {
				type: Number,
				default: 0
			},
			scrollBottom: {
				type: Number,
				default: 0
			}
		},
		watch: {
			scrollY() {
				//通知他妈的滚动了。
				this.setPageScroll(this.scrollY);
			},
			scrollBottom() {
				if(this.scrollBottom != 0) {
					//通知他妈的触底了
					this.setReachBottom();
				}
			},
		},
		created() {
      this.recommended();
      if (this.userInfo) {
        this.login = false;
      }
		},
		mounted() {
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
      orderAllHandle(e){
        uni.navigateTo({
          url: '/sub_pages/order/list?index=' + e // 跳转连接
        })
      },
      recommended(){
        getGoods({
          type: 3,
          page:this.page,
          pageSize:this.pageSize
        }).then((res)=>{
          this.activity_goods = res.data.data.goodsList
        });
      },
      addRandomData() {
        this.page++;
        getGoods({
          type: 3,
          page:this.page,
          pageSize:this.pageSize
        }).then((res)=>{
          if(res.data.data.goodsList.length > 0) {
            this.activity_goods = this.activity_goods.concat(res.data.data.goodsList);
          } else {
            this.nomore = false;
          }
        });
      },
			//页面被滚动
			setPageScroll(scrollTop) {
				//console.log(scrollTop);
			},
			//触底了
			setReachBottom() {
        if (this.nomore) {
          this.addRandomData();
        }
			},
      loginUrlTap() {
        let that = this;
        my.getAuthCode({
          scopes: 'auth_base',
          success: (res) => {
            getCodeId({authcode: res.authCode}).then((res)=>{
              const alipayId = res.data.data;
              //获取alipayId
              if(res.data.code == 0) {
                getId({alipay_id: alipayId}).then((res1)=>{
                  if(res1.data.code == 0) {
                    //如果没登录
                    if(res1.data.data == 0){
                      my.getOpenUserInfo({
                        success: (res) => {
                          let userInfo = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
                          login({
                            alipay_id:alipayId,
                            avatar:userInfo.avatar,
                            nickName:userInfo.nickName
                          }).then((res2)=>{
                            if(res2.data.code == 0) {
                              uni.setStorageSync('userId', res2.data.data);
                              getUser({id:res2.data.data}).then((res3)=>{
                                if(res3.data.code == 0) {
                                  uni.setStorageSync('userInfo', res3.data.data);
                                  this.userInfo = res3.data.data;
                                  that.login = false;
                                }
                              });
                            }
                          });
                        }
                      });
                    }else{
                      uni.setStorageSync('userId', res1.data.data);
                      getUser({id:res1.data.data}).then((res3)=>{
                        if(res3.data.code == 0) {
                          uni.setStorageSync('userInfo', res3.data.data);
                          this.userInfo = res3.data.data;
                          that.login = false;
                        }
                      });
                    }
                  }
                });
              }
            });
          },
        });

      },
      goodsListTap(e) {
        uni.navigateTo({
          url: '/sub_pages/detail/detail?id='+e.data.id + '&type='+e.data.type
        });
      },
      gridTap(e) {
        const that = this;
        // console.log(e);return;
        if(e.id == 1){
          getPhone({type: 3}).then((res)=>{
            if(res.data.code == 0) {
              uni.makePhoneCall({
                phoneNumber: res.data.data.explain.trim(),
              });
            }
          });
        }else if(e.id == 2) {
          uni.navigateTo({
            url: '/sub_pages/feedback/feedback'
          });
        }else if(e.id == 3) {
          uni.navigateTo({
            url: '/sub_pages/help/help?barTitle=使用帮助&type=2'
          });
        }else if(e.id == 4) {
          uni.navigateTo({
            url: '/sub_pages/help/help?barTitle=关于我们&type=5'
          });
        }else if(e.id == 5){
          uni.getStorage({
            key: 'userId',
            success: function (res) {
              const userId = res.data;
              console.log('userId', userId)
              if (!userId) {
                uni.showToast({
                  title: '请先登录',
                  icon: 'none'
                });
              } else {
                uni.navigateTo({
                  url: '/sub_pages/my/set-up'
                });
              }
            }
          });
        }
      }
		},
	}
</script>

<style lang="scss" scoped>
/* 热门推荐 */
.recommended{
  display: flex;
  margin-top: 20rpx;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  .yi{
    display: inline-block;
    width: 40rpx;
    height: 1px;
    background-color: #333333;

  }
}
	.my-box {
		width: 100%;
		display: none;
		.head-box {
			padding-top: var(--status-bar-height);
			padding-bottom: 72.72rpx;
			.user-info-box {
				/* #ifdef MP */
				padding-top: calc(var(--status-bar-height) + 80rpx);
				/* #endif */
				.login-user-view {
					position: relative;
					text-align: center;
					.login-user-avatar-view {
						position: relative;
						margin-bottom: 18.18rpx;
					}
				}
				.cu-list.menu-avatar>.cu-item {
					background-color: inherit;
					.content {
						width: calc(100% - 94.54rpx - 59.99rpx - 20rpx);
						.text-white-bg {
							color: #e8e8e8;
							.text-border-x {
								margin-right: 25.45rpx;
							    position: relative;
								&:after {
									position: absolute;
									background: #dddddd;
								    top: 5.45rpx;
								    width: 1.81rpx;
									right: -12.72rpx;
								    height: 16.36rpx;
								    content: " ";
								}
							}
						}
					}
					&:after {
						width: 0;
						height: 0;
						border-bottom: 0;
					}
				}
				.cu-list.menu-avatar>.cu-item .content>view:first-child {
					font-size: 34.54rpx;
				}
			}
			.user-info-num-box {
				.cu-list.grid.no-border {
					padding: 0;
				}
				.cu-list.grid.no-border>.cu-item {
				    padding-top: 27.27rpx;
				    padding-bottom: 9.09rpx;
				}
				.cu-list.grid {
					background-color: inherit;
				}
				.cu-list.grid>.cu-item text {
					color: #e8e8e8;
					font-size: 20rpx;
					line-height: 27.27rpx;
				}
			}
			.user-info-tip-box {
				position: relative;
				margin: 18.18rpx 27.27rpx;
				border-radius: 9.09rpx;
				padding: 18.18rpx 27.27rpx;
				background: #ea8d8d;
				background-image: linear-gradient(45deg, #f7615f, #f553b3);
				.text-cut {
					padding-right: 45.45rpx;
				}
				.icon {
					position: absolute;
					right: 27.27rpx;
					top: 23.63rpx;
				}
			}
		}
		.view-content {
			margin-top: -20rpx;
      padding: 0 27.27rpx 54.54rpx;
      margin-top: -63.63rpx;
			.user-info-order-box {
				border-radius: 18.18rpx;
				.cu-list.grid.no-border {
				    padding: 0;
				}
				.cu-list.grid.no-border>.cu-item {
				    padding-bottom: 9.09rpx;
				}
			}
			.cu-list.grid>.cu-item text {
			    color: inherit;
			}
			.user-info-money-box {
				border-radius: 18.18rpx;
				.money-col {
					padding: 0 9.09rpx 9.09rpx;
					.money-item {
						position: relative;
						padding: 9.09rpx;
						.money-item-view {
							border: 1.81rpx solid #f3f2f3;
							border-radius: 18.18rpx;
							position: relative;
							padding: 9.09rpx;
							.cu-avatar {
								position: absolute;
								left: 9.09rpx;
							}
							.money-content {
								position: relative;
							    margin-left: 109.09rpx;
							    margin-bottom: 27.27rpx;
							    top: 12.72rpx;
							}
						}
					}
				}
			}
			.user-info-tools-box {
				border-radius: 18.18rpx;
				.tools-view {
					position: relative;
					.tools-title {
						padding-right: 81.81rpx;
					}
					.tools-right {
						position: absolute;
					    right: 9.09rpx;
					    bottom: 23.63rpx;
					}
				}

			}
		}
	}
	.my-box.show {
		display: block;
	}
</style>
